<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>桌牌码</title>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
	</head>
	<style type="text/css">
		/*移动端1px下边线*/
		body{background: #0D6FB8;}
		.border{ position: relative; }
		.border:after{ content: ''; display:block; position: absolute; width: 100%; left: 0px; bottom: 0px;height: 1px; background-color:  #efefef; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);}
		.container{height: 10rem;width: 7.1rem;margin: 0.3rem auto;background: #fff;border-radius: 7px;}
		.codeHead{height: 1.17rem;background: #fafafa;border-radius: 7px 7px 0 0;font-size: 0.34rem;color: #0D6FB8;}
		.codeCont{height: 5.78rem;width: 6.53rem;margin: 0 auto;text-align: center;}
		.codeCont img{width:3.7rem;height: auto;margin-top: 0.47rem;}
		.codebottom{height: 1.36rem;}
		.icon{height: 1rem;width: 1.5rem;font-size: 0.2rem;color: #878787;text-align: center;margin-top: 0.24rem;margin: 0 0.3rem;}
		.icon img{width: 0.6rem;height: auto;}
		.paytype{height: 1.26rem;font-size: 0.3rem;}
		.imgbox{height: 0.66rem;width: 5.4rem;margin: 0.24rem auto;}
		.imgbox img{height: 0.6rem;width: auto;margin: 0 0.1rem;}
		.Preservation{height: 1.11rem;width: 7.1rem;margin: 0.5rem auto;font-size: 0.34rem;background: #fff;border-radius: 5px;}
		.canvas{height: 100%;width: 100%;}
	</style>
	<body>
		<!--头部header开始-->
		<header class="flex flex-align-center">
			<div class="left flex flex-align-center">
				<img src="img/arrleft.png" alt="" class="arrleft"/>
			</div>
			<div class="title">桌牌码</div>
			<div class="right flex flex-pack-center flex-align-center">
			</div>
		</header><!--头部header结束-->
		<!--内容开始-->
		<div class="container" id="shareBody">
			<div class="codeHead flex flex-align-center">
				<p style="margin-left: 0.32rem;">重庆通亿付科技股份有限公司</p>
			</div>
			<div class="codeCont border">
				<img src="img/erCode.png" alt="" />
				<p style="font-size: 0.34rem;color: #0D6FB8;">支持信用卡支付</p>
				<p style="font-size: 0.26rem;color: #878787;">(二维码长期有效)</p>
			</div>
			<div class="codebottom flex flex-align-center flex-pack-center">
				<div class="icon">
					<img src="img/code-s.png" alt="" />
					<p>1.扫码支付</p>
				</div>
				<div class="icon">
					<img src="img/code-c.png" alt="" />
					<p>2.输入金额</p>
				</div>
				<div class="icon">
					<img src="img/code-w.png" alt="" />
					<p>3.确认并支付</p>
				</div>
			</div>
			<!--支持支付方式-->
			<div class="paytype">
				<p style="margin-left: 0.3rem;">支持支付方式</p>
				<div class="imgbox">
					<img src="img/code-wx.png" alt="" />
					<img src="img/code-z.png" alt="" />
					<img src="img/code-bd.png" alt="" />
					<img src="img/code-qq.png" alt="" />
					<img src="img/code-jd.png" alt="" />
					<img src="img/code-yl.png" alt="" />
				</div>
			</div>
		</div>
		<div class="Preservation flex flex-align-center flex-pack-center">
			<p>保存二维码到相册</p>
		</div>
	</body>
	<script type="text/javascript" src="js/rem.js"></script>
	<script type="text/javascript" src="js/zepto.js"></script>
	<script type="text/javascript" src="js/template.js"></script>
	<script type="text/javascript" src="js/api.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/html2canvas.js"></script>
	<script type="text/javascript" src="js/canvas2image.js"></script>
	<script type="text/javascript" src="js/layer.js"></script>
	<script type="text/javascript">
		$(function(){
			//canvas转为img
			function convertCanvasToImage(canvas) {
				　　//新Image对象，可以理解为DOM 
				　　var image = new Image(); 
				　　// canvas.toDataURL 返回的是一串Base64编码的URL，当然,浏览器自己肯定支持 
				　　// 指定格式 PNG 
				　　image.src = canvas.toDataURL("image/png"); 
				　　return image; 
			}	
			$('.Preservation').click(function(){
				var w = $("#shareBody").width();
			    var h = $("#shareBody").height();
			    //要将 canvas 的宽高设置成容器宽高的 2 倍
			    var canvas = document.createElement("canvas");
			    canvas.width = w*2.11;
			    canvas.height = h*2.25;
			    canvas.style.width = w + "px";
			    canvas.style.height = h + "px";
			    var context = canvas.getContext("2d");
			    //然后将画布缩放，将图像放大两倍画到画布上
			    context.scale(2,2);
			    html2canvas(document.querySelector("#shareBody"), {
			      canvas: canvas,
			      onrendered: function (canvas) {
			      	var img=convertCanvasToImage(canvas); 
						$('#shareBody').html("");//移除已生成的避免重复生成
						$('#shareBody').append(img);//imagQrDiv表示你要插入的容器id
			      		$('#shareBody img').addClass('canvas');
			      		$('.Preservation').hide();//隐藏生成二维码按钮
				      	layer.open({
							content: '长按保存到相册',
							skin: 'msg',
							time: 3 //2秒后自动关闭
						});	
			      }
			    })
			});
		});
	</script>
</html>
